<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>小马物联网</title>
  <link rel="stylesheet" href="/stylesheets/reset.css"/>
  <link rel="stylesheet" href="/stylesheets/common.css"/>
  <link rel="stylesheet" href="/stylesheets/car_detail.css"/>
</head>
<body>
<div id="loadding-pannel">
  <div class="little-pannel">
    <i class="iconfont">&#xe644;</i>
  </div>
  <div class="select-pannel">
    <div class="select-content">
      <!--假设这里的data-id是可以获取到锁的全部信息 -->
      <span class="btn" data-id="01">01</span>
      <span class="btn" data-id="02">02</span>
      <span class="btn" data-id="03">03</span>
      <span class="btn" data-id="04">04</span>
      <span class="btn" data-id="05">05</span>
      <span class="btn" data-id="06">06</span>
      <span class="btn" data-id="07">07</span>
      <span class="btn" data-id="08">08</span>
      <span class="btn" data-id="09">09</span>
      <span class="btn" data-id="10">10</span>
      <span class="btn" data-id="11">11</span>
      <span class="btn" data-id="12">12</span>
      <span class="btn" data-id="13">13</span>
      <span class="btn" data-id="14">14</span>
    </div>
    <span class="arrow"></span>
  </div>
</div>
<div class="box-company-pannel" id="box_company_pannel">
  <div class="header">
    <div class="user-img">
      <img src="/images/avatar.png" alt=""/>
      <p class="username">用户名称</p>
    </div>
    <div class="controller-area">
      <div class="lock-area">
        <div class="lock-inner-area">
          <div class="lock-status top-up">
            <img src="/images/top.png" alt="" class="top">
            <img src="/images/bottom.png" alt="" class="bottom">
          </div>
        </div>
      </div>
      <div id="lock_num_btn" class="lock-num-btn">34</div>
      <p class="lock-select-msg">选择车位编号</p>
    </div>
  </div>
  <div class="banner-msg border-1px-bottom">
    <span class="announce-icon"><i class="iconfont">&#xe66a;</i></span>小马物联网优惠用户计划
    <a href="" class="more">更多优惠<i class="iconfont">&#xe747;</i></a>
  </div>
  <div class="main-pannel">
    <div class="lock-controller">
      <span class="community-content">燕大西苑</span>
      <!--0代表关状态，1代表开状态 -->
      <div class="lock-switch" flag="0">
        <span class="btn on">降</span>
      </div>
      <p class="last-stop-content">上次停车<span class="last-stop-time">12-17 23:01:47</span><i class="iconfont">
          &#xe748;</i></p>
    </div>
  </div>
</div>
<div class="footer">
  <div class="footer-item home">
    <div class="footer-msg"><i class="iconfont">&#xe6b8;</i>
      <p>首页</p></div>
  </div>
  <div class="footer-item person">
    <div class="footer-msg"><i class="iconfont">&#xe736;</i>
      <p>我的</p></div>
  </div>
  <div class="footer-item help">
    <div class="footer-msg"><i class="iconfont">&#xe620;</i>
      <p>帮助</p></div>
  </div>
</div>
<script src="/js/zepto.min.js"></script>
<script src="/js/touch.js"></script>
<script src="/js/fx.js"></script>
<script>
    $(function(){

      var loadding_pannel = $('#loadding-pannel')

      var little_pannel = loadding_pannel.find('.little-pannel')

      var select_pannel = $('#loadding-pannel').find('.select-pannel')

      var select_btn = select_pannel.find('.select-content .btn')

      var isLoadingFlag = false

      var changeSwitchDetail = function (that, lock_switch, switch_flag, delayicon, lock_status) {

        //0代表关状态，1代表开状态
        //执行关锁操作
        if (switch_flag) {
          loadding_pannel.show()
          little_pannel.show()
          delayicon.addClass("scrollani")
          isLoadingFlag = true
          setTimeout(function () {
            delayicon.removeClass("scrollani")
            loadding_pannel.hide()
            little_pannel.hide()
            isLoadingFlag = false
            delayicon.addClass("scrollani")

            lock_status.removeClass("top-down")

            lock_status.addClass("top-up")

            that.removeClass("off")

            that.addClass("on")

            that.text("降")

            lock_switch.attr('flag', 0)

          },400)
        } else {
          //执行开锁操作
          loadding_pannel.show()
          little_pannel.show()
          isLoadingFlag = true
          delayicon.addClass("scrollani")
          setTimeout(function () {

            delayicon.removeClass("scrollani")

            loadding_pannel.hide()
            little_pannel.hide()

            delayicon.addClass("scrollani")

            lock_status.removeClass("top-up")

            lock_status.addClass("top-down")

            that.removeClass("on")

            that.addClass("off")

            that.text("升")

            lock_switch.attr('flag', 1)

            isLoadingFlag = false

          },400)
        }
      }

      var changeSwitchSingle = function (e) {
        var that = $(this)
        var lock_switch = $(this).parents('.lock-switch')
        var switch_flag = parseInt(lock_switch.attr('flag'))
        var delayicon = loadding_pannel.find('.iconfont')
        var lock_status = $('#box_company_pannel').find('.controller-area .lock-status')
        changeSwitchDetail(that, lock_switch, switch_flag, delayicon, lock_status)

      }

      $('#box_company_pannel').find('.main-pannel .lock-switch .btn').on('tap', changeSwitchSingle)

      $('#lock_num_btn').on('tap',function(e){

        var even = typeof event == "undefined" ? e : event

        even.stopPropagation()

        loadding_pannel.addClass('color-pannel')
        loadding_pannel.show()
        select_pannel.show()

      })

      select_pannel.on('tap',function(e){

        var even = typeof event == "undefined" ? e : event
        even.stopPropagation()
        loadding_pannel.addClass('color-pannel')
        loadding_pannel.show()
        select_pannel.show()
      })

      loadding_pannel.on('tap',function(e){
        var even = typeof event == "undefined" ? e : event

        if(!isLoadingFlag){

          if(loadding_pannel.hasClass('color-pannel')){
            loadding_pannel.removeClass('color-pannel')
          }
          loadding_pannel.hide()
          select_pannel.hide()

        }



      })


      //这里使用这个得到的id去做异步
      select_btn.on('tap',function(e){
        var even = typeof event == "undefined" ? e : event
            even.stopPropagation()
        var id = $(this).attr('data-id')
        $('#lock_num_btn').text(id)
        loadding_pannel.hide()
        select_pannel.hide()

      })

    })
</script>
</body>
</html>